<template>
  <div class="recommend">
    <div class="title">
      <div class="other-round"></div>
      <h2>WISHING UNDERSTANDING</h2>
      <div class="title-name">
        <SvgIcon name="fire" class="icon"></SvgIcon>
        <h3>{{ $t('recommendName') }}</h3>
      </div>
    </div>
    <div class="recommend-item">
      <div
        v-for="(item, index) in data.articleList"
        :key="index"
        class="hei-set"
      >
        <CommonArticle :article="item" :detail="detail"></CommonArticle>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SvgIcon from '../../../components/SvgIcon.vue';
import { getCurrentInstance, onMounted, onUnmounted, reactive } from 'vue';
import { _getRecommendArticle } from '../index.service.ts';
import { PageDTO } from '@/http/public.type.ts';
import { ArticleListVO } from '../index.ts';
import { useRouter } from 'vue-router';
import PasswordCheck from '@/pages/index/password/PasswordCheck.vue';

import Crypoto from '@/utils/encrypted.ts';
import { useDialog } from 'crane-element';
import CommonArticle from '@/components/CommonArticle.vue';

const cry: any = new Crypoto();

const { openDialog } = useDialog();

const router = useRouter();

const { $t } = getCurrentInstance()?.proxy as any;

const minWidth = 1160;

const data = reactive({
  page: {
    pageNum: 1,
    pageSize: 5
  } as PageDTO,
  articleList: [
    {
      id: '',
      viewCount: 0,
      coverPathDesc: getImage('default_cover'),
      tagNames: ['欢迎'],
      title: '欢迎光临',
      content: '欢迎来到北极星博客',
      creatorAvatar: getImage('default_logo'),
      creatorName: '',
      gmtCreate: '2023-01-01 12:02:09'
    }
  ] as ArticleListVO[],
  isPC: true
});

onMounted(() => {
  initList();
  handleResize();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

function getImage(name: string) {
  const url = new URL(`../../../assets/${name}.jpeg`, import.meta.url);
  return url.pathname;
}

const initList = () => {
  _getRecommendArticle(data.page).then((res) => {
    if (res.data.records.length !== 0 && res.data.records.length <= 2) {
      data.articleList = res.data.records;
    }
    if (res.data.records.length !== 0 && res.data.records.length > 2) {
      data.articleList = res.data.records.slice(0, 2);
    }
  });
};

function detail(id: string, isPassword: boolean) {
  if (isPassword) {
    openDialog({
      component: PasswordCheck,
      options: {
        destroyOnClose: true,
        width: data.isPC ? '50%' : '100%'
      },
      params: {}
    }).then((res: any) => {
      if (res) {
        router.push(
          `/article-detail/${id}+${cry.encrypt(res.password, 'crane-nb-class')}`
        );
      }
    });
  } else {
    router.push(`/article-detail/${id}`);
  }
}

function handleResize() {
  data.isPC = window.innerWidth > minWidth;
}
</script>

<style scoped lang="less">
@media (max-width: 1161px) {
  /* 在宽度小于或等于 1035px 的屏幕上应用以下样式 */
  /* 在这里添加你的样式规则 */
  .recommend {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
  }

  @title-height: 280px;
  @title-width: 100%;

  .recommend-item {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .hei-set {
      height: 400px;
      margin-top: 20px;
    }
  }

  .title {
    width: @title-width;
    height: @title-height;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h2 {
      padding: 0 25px;
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 24.07%,
        rgb(255, 0, 153) 76.05%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 24px;
      text-align: center;
    }

    .title-name {
      display: flex;
      justify-content: center;
      align-items: center;

      h3 {
        font-size: 25px;
      }

      .icon {
        color: var(--font-color);
        margin-right: 5px;
      }
    }

    .other-round {
      display: block;
      width: (1.2 * @title-width);
      height: (1.2 * @title-height);
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 24.07%,
        rgb(255, 0, 153) 76.05%
      );
      position: absolute;
      left: 70%;
      top: 70%;
      z-index: -2;
      transform-origin: 0 0;
      animation: rotate2 3s linear infinite;
    }

    &::after {
      content: '';
      display: block;
      width: (1.2 * @title-width);
      height: (1.2 * @title-height);
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 24.07%,
        rgb(255, 0, 153) 76.05%
      );
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: -2;
      transform-origin: 0 0;
      animation: rotate 3s linear infinite;
    }

    &::before {
      content: '';
      display: block;
      width: calc(@title-width - 8px);
      height: calc(@title-height - 8px);
      border: 1px solid transparent;
      background-color: var(--background-secondary);

      box-sizing: border-box;
      position: absolute;
      left: 4px;
      top: 4px;
      z-index: -1;
      transform-origin: 0 0;
      border-radius: 11px;
    }

    @keyframes rotate {
      to {
        transform: rotate(1turn);
      }
    }

    @keyframes rotate2 {
      to {
        transform: rotate(-1turn);
      }
    }
  }
}

@media (min-width: 1160px) {
  /* 在宽度大于 1035px 的屏幕上应用以下样式 */
  /* 在这里添加你的样式规则 */
  .recommend {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  @title-height: 380px;
  @title-width: 260px;

  .recommend-item {
    width: calc(100% - @title-width - 20px);
    height: @title-height;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 20px;

    .hei-set {
      height: 100%;
    }
  }

  .title {
    width: @title-width;
    height: @title-height;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h2 {
      padding: 0 25px;
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 24.07%,
        rgb(255, 0, 153) 76.05%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 24px;
    }

    .title-name {
      display: flex;
      justify-content: center;
      align-items: center;

      h3 {
        font-size: 25px;
      }

      .icon {
        color: var(--font-color);
        margin-right: 5px;
      }
    }

    .other-round {
      display: block;
      width: (1.2 * @title-width);
      height: (1.2 * @title-height);
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 24.07%,
        rgb(255, 0, 153) 76.05%
      );
      position: absolute;
      left: 70%;
      top: 70%;
      z-index: -2;
      transform-origin: 0 0;
      animation: rotate2 3s linear infinite;
    }

    &::after {
      content: '';
      display: block;
      width: (1.2 * @title-width);
      height: (1.2 * @title-height);
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 24.07%,
        rgb(255, 0, 153) 76.05%
      );
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: -2;
      transform-origin: 0 0;
      animation: rotate 3s linear infinite;
    }

    &::before {
      content: '';
      display: block;
      width: calc(@title-width - 8px);
      height: calc(@title-height - 8px);
      border: 1px solid transparent;
      background-color: var(--background-secondary);

      box-sizing: border-box;
      position: absolute;
      left: 4px;
      top: 4px;
      z-index: -1;
      transform-origin: 0 0;
      border-radius: 11px;
    }

    @keyframes rotate {
      to {
        transform: rotate(1turn);
      }
    }

    @keyframes rotate2 {
      to {
        transform: rotate(-1turn);
      }
    }
  }
}
</style>
